<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>添加商品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <style>
      .el-descriptions-item__label {
        width: 100px;
      }

      .Sort {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #67c23a;
      }
      .el-tabs--border-card {
        box-shadow: none;
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      .el-input__icon:hover {
        color: #409eff;
      }
      #group_detail {
        display: flex;
      }
      #group_detail .el-form-item__label {
        flex-shrink: 0;
      }
      #group .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 110px;
      }
      .upload_file.none .el-upload {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak class="minWidth">
      <yl-page-header content="添加商品"></yl-page-header>
      <div
        v-if="loading"
        style="
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9000;
        "
        v-loading="loading"
        element-loading-text="更新商品数据中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
      <el-form
        :model="form"
        :rules="rules"
        ref="contract"
        inline-message="true"
        style="width: 100%"
      >
        <div class="table_titel">
          <div class="titel">添加商品</div>
        </div>
        <el-descriptions :column="3" border size="small">
          <!-- <el-descriptions-item label="商品编码">
                    <el-form-item prop="Article_Code">
                        <el-input clearable v-model.trim="form.Article_Code" placeholder="请输入商品编码"></el-input>
                    </el-form-item>
                </el-descriptions-item> -->
          <el-descriptions-item label="商品名称">
            <el-form-item prop="Article_Name">
              <el-input
                clearable
                v-model.trim="form.Article_Name"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="品种">
            <el-form-item prop="VarietyID">
              <el-select
                v-model="VarietyID"
                @change="handleChange"
                filterable
                placeholder="请选择品种"
                class="kuang"
                style="width: 100%"
              >
                <el-option
                  v-for="item in iJSONArray_Variety"
                  :key="item.VarietyID"
                  :label="item.VarietyName"
                  :value="item.VarietyID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="等级">
            <el-form-item prop="GradeID">
              <el-select
                v-model="GradeID"
                placeholder="请选择等级"
                class="kuang"
                style="width: 100%"
              >
                <el-option
                  v-for="item in iJSONArray_VarietyGrade"
                  :key="item.GradeID"
                  :label="item.GradeName"
                  :value="item.GradeID"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="商品品牌">
            <el-form-item prop="Brand_SerialNumber">
              <el-select
                clearable
                v-model.trim="form.Brand_SerialNumber"
                placeholder="请选择商品品牌"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item,index) in brand"
                  :key="index"
                  :label="item.Brand_Name"
                  :value="item.Brand_SerialNumber"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="商品类型">
            <el-form-item prop="Category_SerialNumber">
              <el-select
                clearable
                v-model.trim="form.Category_SerialNumber"
                placeholder="请选择商品类型"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item,index) in category"
                  :key="index"
                  :label="item.Category_Name"
                  :value="item.Category_SerialNumber"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="包装信息">
            <el-form-item prop="is_Article_Type">
              <el-select
                clearable
                v-model.trim="is_Article_Type"
                placeholder="请选择包装信息"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item,index) in article_info"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="封面图">
            <el-upload
              :limit="1"
              :file-list="fmfileList"
              :class="['upload_file', {'none': fmfileList?.length }]"
              multiple
              list-type="picture-card"
              :on-remove="handleRemove"
              :before-upload="handleBeforeUpload"
              :on-change="chandleChange"
            >
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">收款方式(额度比为100%以内，输入数字即可)</div>
        </div>
        <el-descriptions :column="7" border size="small">
          <el-descriptions-item label="定金">
            <el-form-item prop="dj">
              <el-input
                v-model="dj.dje"
                placeholder="请输入定金额度比"
              ></el-input>
              <el-input
                v-model="dj.djs"
                placeholder="请输入定金付款时期"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="8" border size="small">
          <el-descriptions-item label="发货">
            <el-form-item prop="fh">
              <el-input
                v-model="fh.fhe"
                placeholder="请输入发货额度比"
              ></el-input>
              <el-input
                v-model="fh.fhs"
                placeholder="请输入发货付款时期"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="9" border size="small">
          <el-descriptions-item label="到货">
            <el-form-item prop="dh">
              <el-input
                v-model="dh.dhe"
                placeholder="请输入到货额度比"
              ></el-input>
              <el-input
                v-model="dh.dhs"
                placeholder="请输入到货付款时期"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="10" border size="small">
          <el-descriptions-item label="尾款">
            <el-form-item prop="wk">
              <el-input
                v-model="wk.wke"
                placeholder="请输入尾款额度比"
              ></el-input>
              <el-input
                v-model="wk.wks"
                placeholder="请输入尾款付款时期"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">商品规格</div>
          <div class="operation">
            <el-button
              type="primary"
              size="small"
              @click="add_article_specifications"
              >新增</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="remove_article_specifications"
              >删除</el-button
            >
          </div>
        </div>
        <el-table
          :data="business_article_specifications"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column
            align="center"
            min-width="140"
            prop="Specifications_Name"
            label="规格"
          >
            <template v-slot="{row, column, $index}">
              <el-input
                v-model.trim="row.Specifications_Name"
                @input="changeSpecificationsName($index)"
                placeholder="请输入规格"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="规格图片" width="180">
            <template slot-scope="scope">
              <el-upload
                :data="scope.$index"
                :limit="1"
                list-type="picture-card"
                :file-list="showFileList(scope.$index)"
                :class="['upload_file', {'none':  showFileList(scope.$index)?.length}]"
                :before-upload="(file)=>ahandleBeforeUpload(file,scope.$index)"
                :on-remove="()=>ahandleRemove(scope.$index)"
                :on-change="ahandleChange"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column align="center" label="包装中件数" min-width="140">
            <template v-slot="{row}">
              <el-input
                v-model.trim="row.SKU_Quantity"
                placeholder="请输入包装中件数"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="包装单位" min-width="140">
            <template v-slot="{row}">
              <el-select
                clearable
                v-model.trim="row.Size"
                placeholder="请选择包装单位"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="(item,index) in bzdw"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="步长" min-width="140">
            <template v-slot="{row}">
              <el-input
                v-model.trim="row.Step_Size"
                placeholder="请输入指定步长"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="起批量" min-width="140">
            <template v-slot="{row}">
              <el-input
                v-model.trim="row.Start_number"
                placeholder="请输入起批量"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="sku单价" min-width="140">
            <template v-slot="{row}">
              <el-input
                v-model.trim="row.Unit_Price"
                placeholder="请输入sku单价"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_titel">
          <div class="titel">商品主图</div>
        </div>
        <div style="display: flex">
          <el-upload
            drag
            :file-list="cfileList"
            multiple
            list-type="picture"
            :before-upload="chandleBeforeUpload"
            :on-change="chandleChange"
            :on-remove="zhandleRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </div>
        <div class="table_titel">
          <div class="titel">商品详情图</div>
        </div>
        <div>
          <div style="display: flex">
            <el-upload
              drag
              :file-list="DfileList"
              multiple
              list-type="picture"
              :before-upload="DhandleBeforeUpload"
              :on-change="DhandleChange"
              :on-remove="DhandleRemove"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
          <div style="display: flex; width: 100%">
            <!-- 配置 -->
            <div
              id="Detail_Image"
              style="
                width: 300px;
                flex-shrink: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div
                class="preview"
                :style="{borderColor:isDetailSort?'#67C23A':'#F5F5F5'}"
                v-for="(item,index) in Detail_Image.filter(i=>i.id==0)"
                :key="index"
              >
                <el-image
                  :ref="'Detail'+index"
                  :preview-src-list="[item.Base64]"
                  class="el-upload-list__item-thumbnail"
                  fit="contain"
                  :src="item.Base64"
                  style="width: 148px; height: 148px"
                ></el-image>
                <span
                  v-show="!isDetailSort"
                  class="el-upload-list__item-actions"
                >
                  <span
                    @click="handleImgClick('Detail'+index)"
                    style="cursor: pointer"
                    ><i class="el-icon-zoom-in"></i
                  ></span>
                  <span
                    @click="RemoveImage('Detail_Image',index)"
                    style="cursor: pointer"
                    ><i class="el-icon-delete"></i
                  ></span>
                </span>
                <i v-show="isDetailSort" class="el-icon-rank Sort"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="table_titel">
          <div class="titel">检测报告</div>
        </div>
        <div>
          <div style="display: flex">
            <el-upload
              drag
              :file-list="jcfileList"
              multiple
              list-type="picture"
              :before-upload="jchandleBeforeUpload"
              :on-change="jcDhandleChange"
              :on-remove="jchandleRemove"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
          <!-- <upload-images :data="Main_Image" :id="0"></upload-images> -->
          <div
            id="Main_Image"
            style="
              margin-left: 10px;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
            "
          >
            <div
              class="preview"
              :style="{borderColor:isMainSort?'#67C23A':'#F5F5F5'}"
              v-for="(item,index) in Main_Image.filter(i=>i.id==0)"
              :key="index"
            >
              <el-image
                :ref="'Main'+index"
                :preview-src-list="[item.Base64]"
                class="el-upload-list__item-thumbnail"
                fit="contain"
                :src="item.Base64"
                style="width: 148px; height: 148px"
              ></el-image>
              <span v-show="!isMainSort" class="el-upload-list__item-actions">
                <span
                  @click="handleImgClick('Main'+index)"
                  style="cursor: pointer"
                  ><i class="el-icon-zoom-in"></i
                ></span>
                <span
                  @click="RemoveImage('Main_Image',index)"
                  style="cursor: pointer"
                  ><i class="el-icon-delete"></i
                ></span>
              </span>
              <i v-show="isMainSort" class="el-icon-rank Sort"></i>
            </div>
          </div>
        </div>
        <div style="height: 90px"></div>
        <el-form-item class="form-operation">
          <el-button @click="window.history.back()">返回</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('contract')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/jquery.cookie.js"
    ></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/Sortable.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../component/elementUI/index.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../component/component.js"
    ></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
  </body>
</html>
